<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { getImgSrc } from '@/views/product/reno14-pro/image/4/img-src'
import VideoComp from '../../components/item2/video-comp.vue'
import { useGsapContext } from '@/hooks'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'
import { useIntersectionObserver } from '@vueuse/core'

const { scrollGroup } = useScrollGroup()

const active = ref<number>(0)

const containerRef = useTemplateRef<HTMLDivElement | null>('containerRef')
const videoWrapRef = useTemplateRef<HTMLDivElement | null>('videoWrapRef')
useIntersectionObserver(videoWrapRef, ([{ isIntersecting }]) => {
  if (!isIntersecting) {
    const video = videoWrapRef.value?.querySelector(`& > div video`) as HTMLVideoElement | null
    if (video) {
      video.pause()
      video.currentTime = 0
    }
  }
})

useGsapContext(() => {
  if (!containerRef.value || !videoWrapRef.value) {
    return
  }

  ScrollTrigger.create({
    trigger: containerRef.value,
    start: 'top center',
    end: 'bottom center',
    onToggle: async (self) => {
      const video = videoWrapRef.value?.querySelector(`& > div video`) as HTMLVideoElement | null

      if (self.isActive && video) {
        await video.play().catch()
      }
    },
    ...scrollGroup,
  })
})

const src = getImgSrc('videos-live-1-c1-1-pc.mp4')

const videoDescData = [
  {
    mainTitle: '超鲜活画质',
    subtitle: ['原生 4K HDR 画质，从容截取黄金三秒。', '小红书分享高清又高光，美妙不打折。'],
  },
  {
    mainTitle: '想变得有趣',
    subtitle: ['慢动作视频的一瞬，用实况照片轻松分享，', '小照片刻画大乾坤。'],
  },
  {
    mainTitle: '还能再有趣',
    subtitle: ['希区柯克变焦的大片，用实况照片轻松分享，', '故事感一眼入迷。'],
  },
]
</script>

<template>
  <div
    ref="containerRef"
    class="mt-[3.5rem] bg-[#201f1c] rounded-sm px-[clamp(1.375rem,0.125rem+1.9531vw,2rem)] py-[clamp(2rem,0rem+3.125vw,3rem)] flex lg:gap-[3rem]"
  >
    <div class="flex-1 grid grid-cols-1 grid-rows-[repeat(2,min-content)] content-between">
      <div class="text-[clamp(2rem,0rem+3.125vw,3rem)] leading-[1.26]">
        <p>4K 视频转实况照片</p>
        <p>帧帧都 4K</p>
        <p>更有生命力</p>
      </div>

      <div class="w-max flex h-full">
        <div class="w-[2px] h-full bg-[#3c3c3c] translate-x-[2px]"></div>
        <ul class="grid gap-y-[clamp(0.625rem,-0.125rem+1.1719vw,1rem)] relative z-1">
          <li
            v-for="(desc, index) in videoDescData"
            :key="index"
            class="opacity-55 cursor-pointer pl-[clamp(0.75rem,0rem+1.1719vw,1.125rem)] li-left-border"
            :class="{ 'li-active': active === index }"
            @click="active = index"
          >
            <p>{{ desc.mainTitle }}</p>
            <div class="fold-content" :class="{ 'fold-active': active === index }">
              <div class="grid-item">
                <div class="max-w-[19.75rem] text-[clamp(0.625rem,-0.125rem+1.1719vw,1rem)]">
                  <p v-for="(i, _key) in desc.subtitle" :key="_key">{{ i }}</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div ref="videoWrapRef" class="flex-none w-[64%]">
      <keep-alive>
        <video-comp v-if="active === 0" :src pc />
        <video-comp v-else-if="active === 1" :src pc />
        <video-comp v-else :src pc />
      </keep-alive>
    </div>
  </div>
</template>

<style scoped>
.li-left-border {
  border-left: 2px solid transparent;
}
.li-active {
  border-left-color: #fff !important;
  opacity: 1;
  cursor: auto;
}

.fold-content.fold-active {
  grid-template-rows: 1fr;
}

.fold-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: all 0.5s;

  .grid-item {
    min-height: 0;
    overflow: hidden;
  }
}
</style>
